<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/OutletManagementTemplate.xhtml">

    <ui:define name="contentInsert">

        <h:form id="selectDayForm">
            <h:panelGrid columns="4">
                <h:outputLabel value="Select Day: " />
                <h:selectOneMenu id="selectDayMenu" value="#{timeslotMgmtBean.day}">
                    <f:selectItem itemValue="Select Day: "/>
                    <f:selectItem itemValue="Monday" />
                    <f:selectItem itemValue="Tuesday" />
                    <f:selectItem itemValue="Wednesday" />
                    <f:selectItem itemValue="Thursday" />
                    <f:selectItem itemValue="Friday" />
                    <f:selectItem itemValue="Saturday" />
                    <f:selectItem itemValue="Sunday" />
                </h:selectOneMenu>
                <p:message for="selectDayMenu"/>
                <p:commandButton id="selectDaySubmit" value="Go" ajax="false"
                                 update="timeSlotList" >
                </p:commandButton>
            </h:panelGrid>
        </h:form>
        <br/>
        <br/>

        <h:form id="timeSlotTableForm">
            <p:dataTable var="timeSlot" value="#{timeslotMgmtBean.timeslotsInteger}" id="timeSlotList">
                <f:facet name="header" >
                    <h:outputText value="#{timeslotMgmtBean.day}"/>
                </f:facet>
                <p:column headerText="Time" style="width:150px" sortBy="#{timeSlot}">
                    <p:cellEditor>  
                        <f:facet name="output">  
                            <h:outputText value="#{timeSlot}">
                            </h:outputText>
                        </f:facet>
                        <f:facet name="input">
                            <p:inputMask value="#{timeSlot}" mask="9999"/>
                        </f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column>
                    <p:rowEditor />
                </p:column>
                <p:column>
                    <h:commandButton value="Delete" action="#{timeslotMgmtBean.removeTimeslot(timeSlot)}">
                    </h:commandButton>
                </p:column>
            </p:dataTable>  
            <br/>

            <p:commandButton id="newTimeslot" value="Add new timeslot" oncomplete="addDialog.show()"/>
            <p:commandButton id="populate" value="Populate to the rest weekdays" 
                             update="timeSlotList"
                             actionListener="#{timeslotMgmtBean.populate}" ajax="false"/>
        </h:form>

        <p:dialog id="addDialog" header="Add new timeslot" widgetVar="addDialog"
                  width="550" height="300" >  
            <h:form>  
                <h:outputLabel value="Add dish to meal:"/>
                <h:panelGrid columns="2" border="1">
                    <h:outputLabel value="Select hour:"/>
                    <h:outputLabel value="Select minute:"/>
                    <h:selectOneMenu value="#{timeslotMgmtBean.hour}">
                        <f:selectItems value="#{timeslotMgmtBean.allHours}"  
                                       var="hour"
                                       itemValue="#{hour}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu value="#{timeslotMgmtBean.minute}">
                        <f:selectItems value="#{timeslotMgmtBean.allMinutes}"  
                                       var="minute"
                                       itemValue="#{minute}"/>  
                    </h:selectOneMenu>
                </h:panelGrid>
                <p:commandButton id="submitNewTimeslot" value="Add new" update="timeSlotList"
                                 actionListener="#{timeslotMgmtBean.addTimeslot}" ajax="false"
                                 oncomplete="addDialog.close()"/>
            </h:form>  
        </p:dialog>

    </ui:define>
</ui:composition>
